import React, { PureComponent } from 'react'
import axios from 'axios';
import './index.scss';
import abc1 from '../../img/two-member.png'
import abc2 from '../../img/collection.png'
import abc3 from '../../img/more.png'
import abc4 from '../../img/gift.png'
import abc5 from '../../img/addto.png'
import abc6 from '../../img/cart-detail.png'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper';
import withRightNav from '../../components/hoc/withRightNav';

class Item extends PureComponent {
    constructor() {
        super();
        this.state = {
            itemObj: {
                templateInfo: {
                    commodityBatchList: [0]
                },
            },
            swiperArr: [],
            jieshaolist: []
        }
    }
    componentDidMount() {
        let ptKey = this.props.match.params.id;
        axios.post('https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/commodityDetail', { "ptKey": ptKey, "memberKey": "", "isWholeSale": 0, "channelId": null }).then(res => {
            console.log(res);
            let swiperArr = res.data.data.templateInfo.bannerImages.split(',');
            let jieshaolist = res.data.data.templateInfo.detailImages.split(',');
            this.setState({
                itemObj: res.data.data,
                swiperArr: swiperArr,
                jieshaolist: jieshaolist
            })
            console.log(swiperArr);
            let { itemObj } = this.state;
            console.log(itemObj.templateInfo.commodityBatchList[0].name);
        })
    }
    goShop = () => {
        this.props.history.push('/cart');
    }
    render() {
        let { itemObj, swiperArr, jieshaolist } = this.state;
        return (
            <div className='item_con'>
                <div className='item_swiper'>
                    <Swiper
                        modules={[Pagination, Autoplay]}
                        pagination={{ clickable: true }}
                        autoplay={{ delay: 2500 }}
                        loop={true}
                    >
                        {
                            swiperArr.map((item, index) => <SwiperSlide key={index}>
                                < img src={item} alt={item}></img>
                            </SwiperSlide>)
                        }
                    </Swiper>
                </div>
                <div className='item_kaitong'>
                    <span className='kaitong_span'>开通旺旺会员，购买立省21元</span>
                    <span className='kaitong_span'>立即开通</span>
                </div>
                <div className='jiage'>
                    <span>￥</span>
                    <span>{itemObj.templateInfo.origPrice}</span>
                    <span>/{itemObj.templateInfo.unit}</span>
                    <span>￥{itemObj.templateInfo.supplyPrice}</span>
                    <span><img src={abc1} alt={2} /></span>
                </div>
                <div className='shangping'>
                    <span>
                        {itemObj.templateInfo.name}
                        {itemObj.templateInfo.commodityBatchList[0].flavour}
                        {itemObj.templateInfo.commodityBatchList[0].spec}
                    </span>
                    <span><div><img src={abc2} alt={2} /></div><span>收藏</span></span>
                </div>
                <span className='jieshao'>{itemObj.templateInfo.description}</span>
                <div className='kongbai'></div>
                <div className='yixuan'>
                    <span>已选</span>
                    <div className='yixuan_right'>
                        <span>{itemObj.templateInfo.displayName}</span>
                        <span><img src={abc3} alt={2} /></span>
                    </div>
                </div>
                <div className='cuxiao'>
                    <span>促销</span>
                    <div className='cuxiao_right'>
                        <span className='cuxiao_right1'>
                            <span><img src={abc4} alt={2} /></span>
                            <span>本商品当前正在参与1项满赠活动</span>
                        </span>
                        <span className='cuxiao_right2'><img src={abc3} alt={2} /></span>
                    </div>
                </div>
                <div className='kongbai1'></div>
                <div className='xiangqing'>
                    <span></span>
                    <span>商品详情</span>
                </div>
                <div className='jieshaotu'>
                    {
                        jieshaolist.map((item, index) => <div key={index}>
                            <img src={item} alt={item} />
                        </div>)
                    }
                </div>
                <div className='kongbai'></div>
                <div className='xiangqing'>
                    <span></span>
                    <span>规格参数</span>
                </div>
                <div className='heixian'></div>
                <div className='kongbai'></div>
                <div className='xiangqing'>
                    <span></span>
                    <span>价格说明</span>
                </div>
                <div className='heixian'></div>
                <div className='shuoming'>
                    <span>划线价</span>
                    <span>指商品的专柜价、吊牌价、正品零售价、厂商指导价或 该商品的曾经展示过销售价等，并非原价，仅供参考。</span>
                </div>
                <div className='shuoming'>
                    <span>非划线价</span>
                    <span>指商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员优惠券、积分等发生变化，最终以订单为准</span>
                </div>
                <div className='end'>
                    <div className='end_left'>
                        <img src={abc5} alt={2} />
                        <p>客服</p>
                    </div>
                    <div className='end_con' onClick={this.goShop}>
                        <img src={abc5} alt={2} />
                        <p>购物车</p>
                    </div>
                    <div className='end_right'>
                        <img src={abc6} alt={2} />
                        <span>加入购物车</span>
                    </div>
                </div>
            </div>

        )
    }
}
export default withRightNav(Item);
